<template>
  <div class="company-detail">
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="10" animated />
    </div>
    
    <!-- 公司信息 -->
    <template v-else-if="company">
      <div class="company-header">
        <div class="company-info">
          <div class="company-logo">
            <img v-if="company.logo" :src="company.logo" :alt="company.name" />
            <el-icon v-else><office-building /></el-icon>
          </div>
          <div class="company-basic">
            <h1 class="company-name">{{ company.name }}</h1>
            <div class="company-tags">
              <el-tag v-if="company.industry" size="small">{{ company.industry }}</el-tag>
              <el-tag v-if="company.size" size="small" type="info">{{ company.size }}</el-tag>
              <el-tag v-if="company.funding" size="small" type="success">{{ company.funding }}</el-tag>
            </div>
            <div class="company-location">
              <el-icon><location /></el-icon>
              <span>{{ company.city }} {{ company.address }}</span>
            </div>
          </div>
        </div>
        
        <div class="company-actions">
          <el-button type="primary" @click="viewJobList">查看该公司所有职位</el-button>
        </div>
      </div>
      
      <el-tabs v-model="activeTab" class="company-tabs">
        <el-tab-pane label="公司介绍" name="intro">
          <div class="company-intro">
            <div class="section-title">公司简介</div>
            <div class="section-content" v-html="company.introduction || '暂无公司介绍'"></div>
            
            <div class="section-title">公司福利</div>
            <div class="benefits-list" v-if="company.benefits && company.benefits.length">
              <el-tag 
                v-for="(benefit, index) in company.benefits" 
                :key="index"
                class="benefit-tag"
              >
                {{ benefit }}
              </el-tag>
            </div>
            <div class="section-content" v-else>暂无福利信息</div>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="在招职位" name="jobs">
          <div class="company-jobs">
            <!-- 职位列表 -->
            <div v-if="jobs.length" class="job-list">
              <div v-for="job in jobs" :key="job.id" class="job-card" @click="viewJobDetail(job.id)">
                <div class="job-info">
                  <h3 class="job-title">{{ job.title }}</h3>
                  <div class="job-meta">
                    <span class="job-salary">{{ job.salary }}</span>
                    <span class="job-location">{{ job.city }}</span>
                    <span class="job-experience">{{ job.experience }}</span>
                    <span class="job-education">{{ job.education }}</span>
                  </div>
                </div>
                <div class="job-actions">
                  <el-button type="primary" size="small" plain>查看详情</el-button>
                </div>
              </div>
            </div>
            <el-empty v-else description="暂无在招职位" />
          </div>
        </el-tab-pane>
      </el-tabs>
    </template>
    
    <!-- 公司不存在 -->
    <el-result v-else icon="error" title="公司不存在" subtitle="未找到该公司信息">
      <template #extra>
        <el-button type="primary" @click="$router.push('/jobs')">浏览职位</el-button>
      </template>
    </el-result>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Location, OfficeBuilding } from '@element-plus/icons-vue'
import { getCompanyDetail, getCompanyJobs } from '@/api/company'

const route = useRoute()
const router = useRouter()
const companyId = ref(parseInt(route.params.id))

// 状态变量
const loading = ref(true)
const company = ref(null)
const jobs = ref([])
const activeTab = ref('intro')

// 获取公司信息
const fetchCompanyData = async () => {
  loading.value = true
  
  try {
    // 获取公司详情
    const response = await getCompanyDetail(companyId.value).catch(() => {
      // 如果API未实现，返回模拟数据
      console.log('使用模拟公司数据')
      return {
        data: {
          id: companyId.value,
          name: `演示公司 ${companyId.value}`,
          logo: '',
          industry: '互联网/IT',
          size: '100-499人',
          funding: 'B轮融资',
          city: '北京',
          address: '朝阳区望京SOHO T1',
          introduction: `<p>这是一家成长迅速的互联网科技公司，专注于提供创新的解决方案。</p>
          <p>我们致力于创造一个开放、平等、合作的工作环境，鼓励每一位员工充分发挥自己的才能和创造力。</p>
          <p>公司核心业务包括：</p>
          <ul>
            <li>人工智能技术研发</li>
            <li>企业数字化转型服务</li>
            <li>云计算解决方案</li>
            <li>大数据分析平台</li>
          </ul>`,
          benefits: ['五险一金', '带薪年假', '弹性工作', '免费午餐', '定期体检', '节日福利', '团队建设']
        }
      }
    })
    
    if (response && response.data) {
      company.value = response.data
      
      // 获取公司发布的职位
      const jobsResponse = await getCompanyJobs(companyId.value, {
        status: 1,
        page: 1,
        size: 10
      }).catch(() => {
        // 如果API未实现，返回模拟数据
        console.log('使用模拟职位数据')
        return {
          data: {
            records: [
              {
                id: 10001,
                title: '高级前端开发工程师',
                salary: '25K-35K',
                city: '北京',
                experience: '3-5年',
                education: '本科及以上',
                categoryId: 1
              },
              {
                id: 10002,
                title: '产品经理',
                salary: '20K-30K',
                city: '北京',
                experience: '3-5年',
                education: '本科及以上',
                categoryId: 1
              },
              {
                id: 10003,
                title: 'Java后端工程师',
                salary: '30K-45K',
                city: '北京',
                experience: '5-10年',
                education: '本科及以上',
                categoryId: 1
              }
            ],
            total: 3
          }
        }
      })
      
      if (jobsResponse && jobsResponse.data) {
        jobs.value = jobsResponse.data.records || []
      }
    } else {
      company.value = null
      ElMessage.error('获取公司信息失败')
    }
  } catch (error) {
    console.error('获取公司信息失败', error)
    ElMessage.error('获取公司信息失败，请稍后再试')
    company.value = null
  } finally {
    loading.value = false
  }
}

// 查看公司所有职位
const viewJobList = () => {
  router.push({
    path: '/jobs',
    query: { companyId: companyId.value }
  })
}

// 查看职位详情
const viewJobDetail = (jobId) => {
  router.push(`/jobs/${jobId}`)
}

// 页面加载时获取数据
onMounted(() => {
  fetchCompanyData()
})
</script>

<style lang="scss" scoped>
.company-detail {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 20px;
  
  .loading-container {
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  
  .company-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    
    .company-info {
      display: flex;
      align-items: center;
      
      .company-logo {
        width: 100px;
        height: 100px;
        border-radius: 8px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f5f7fa;
        margin-right: 20px;
        
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        
        .el-icon {
          font-size: 40px;
          color: #909399;
        }
      }
      
      .company-basic {
        .company-name {
          font-size: 24px;
          font-weight: 600;
          margin: 0 0 10px 0;
        }
        
        .company-tags {
          margin-bottom: 10px;
          
          .el-tag {
            margin-right: 8px;
          }
        }
        
        .company-location {
          display: flex;
          align-items: center;
          color: #606266;
          
          .el-icon {
            margin-right: 5px;
          }
        }
      }
    }
  }
  
  .company-tabs {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 20px;
    
    .company-intro {
      padding: 10px;
      
      .section-title {
        font-size: 18px;
        font-weight: 600;
        margin: 20px 0 15px 0;
        padding-left: 10px;
        border-left: 4px solid #409EFF;
      }
      
      .section-content {
        color: #606266;
        line-height: 1.8;
      }
      
      .benefits-list {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 10px;
        
        .benefit-tag {
          margin-right: 10px;
          margin-bottom: 10px;
        }
      }
    }
    
    .company-jobs {
      padding: 10px;
      
      .job-list {
        .job-card {
          padding: 20px;
          border-radius: 8px;
          border: 1px solid #EBEEF5;
          margin-bottom: 15px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          cursor: pointer;
          transition: all 0.3s;
          
          &:hover {
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            border-color: #d9ecff;
          }
          
          .job-info {
            .job-title {
              font-size: 18px;
              font-weight: 600;
              margin: 0 0 10px 0;
              color: #303133;
            }
            
            .job-meta {
              display: flex;
              flex-wrap: wrap;
              gap: 15px;
              color: #606266;
              
              .job-salary {
                color: #f56c6c;
                font-weight: 600;
              }
            }
          }
        }
      }
    }
  }
}

/* 响应式适配 */
@media (max-width: 768px) {
  .company-detail {
    padding: 15px;
    
    .company-header {
      flex-direction: column;
      padding: 20px;
      
      .company-info {
        margin-bottom: 20px;
      }
      
      .company-actions {
        width: 100%;
        display: flex;
        justify-content: center;
      }
    }
  }
}
</style> 